<template>
  <div class="user">
    <div class="user_header" :style="{backgroundImage: `url(${background_image})`}">
      <van-icon name="set" class="user_set" />
      <div class="user_avatar">
        <img :src="wxImage" alt="头像" width="20%">
      </div>
      </div>
      <van-cell-group>
        <van-cell title="个人信息">
        </van-cell>
        <van-cell icon="username" title="登录名" :value="username" />
        <van-cell icon="mobile" title="手机" :value="mobile" />
      </van-cell-group>
      <div class="operaiton-button">
        <van-button size="large" type="danger" :loading="isLoading" @click="unBindWx" class="btn-bind">登出</van-button>
      </div>

    </div>
</template>

<script>
import { mediaURL } from "@/config";
import { uploadDutyLetter,UnBindUser } from "./../../api/user";
import wx from "weixin-js-sdk";
import { mapState } from "vuex";
import avatar_default from "@/assets/images/avatar_default.png";
import bg_default from "@/assets/images/user_head_bg.png";
export default {
  data() {
    return {
      background_image: bg_default,
      isLoading:false
    };
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    username: state => state.user.username,
    mobile: state => state.user.mobile,
    wxImage: state => state.user.wxImage || avatar_default,
  }),

  watch: {},

  created() {},

  methods: {
 async unBindWx() {
      this.isLoading=true;
      let res = await UnBindUser({});
      if (res.code === 0) {
        this.$router.replace('/login')
      } else {
        this.$toast.fail(res.mag);
      }
       this.isLoading=false;
    }
  }
};
</script>


<style lang="scss" scoped>
.user_header {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  height: 130px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  padding-top: 30px;
}

i.user_set {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
}
.user_avatar {
  margin-bottom: 10px;
  img {
    border: 0;
    border-radius: 50%;
  }
}

</style>
